import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { decrement } from '../store/modules/count'

export class Profiles extends PureComponent {
  sub(num){
    this.props.decrement(num)
  }
  render() {
    const { counter } = this.props
    return (
      <div>
        <h3>Profils counter: {counter}</h3>
        <div>
          <button onClick={() => this.sub(5)}>-5</button>
          <button onClick={() => this.sub(10)}>-10</button>
          <button onClick={() => this.sub(20)}>-20</button>
        </div>
      </div>
    )
  }
}

const mapStatetoProps = (state) => ({
  counter: state.count.counter
})

const mapDispatchToProps = (dispatch) => ({
  decrement: (num) => dispatch(decrement(num))
})

export default connect(mapStatetoProps,mapDispatchToProps)(Profiles)